<style>
.ui-jqgrid .ui-jqgrid-pager {
	height: 36px;
}
#paletteHelpWrapper{
     background: #383b61;
     padding:0px;
}
#canvasHelpWrapper, #propertiesHelpWrapper{
   padding:0px;
}
</style>

<div ng-controller="StencilController">
	
	<div class="full">
		<div class="row row-no-gutter">
			<div id="paletteHelpWrapper" class="col-xs-2" ng-if="!previewMode">
			<div class="search-wrap"><input type="search" placeholder="search" class="search" style="
				    display: block;
				    width: 90%;
				    color: #d8d8ec;
				    background: #3a3c62;
				    border: 1px solid #525676;
				    border-radius: 12px;
				    outline: 0;
				    padding-left: 8px;
				    margin: 8px 5%;
				    box-sizing: border-box;
				    height: 30px;
				    max-height: 30px;
				    line-height: 30px;
				    z-index: 1;
				    outline: 0;
				    position: relative;
				"></div>
				<div class="stencils" id="paletteSection">
					<div ng-if="stencilItemGroups.length > 1">
						<div ng-repeat="group in stencilItemGroups">

							<ul ng-if="group.visible && group.items" class="stencil-group"
								ng-class="{collapsed: !group.expanded, 'first': $first}">
								<li
									ng-include="'editor-app/partials/stencil-item-template.html?version=4'"></li>
							</ul>

							<div ng-if="!group.items"
								ng-include="'editor-app/partials/root-stencil-item-template.html?version=4'"></div>

						</div>
					</div>
					<div ng-if="stencilItemGroups.length == 1">
						<ul class="stencil-group">
							<li ng-repeat="item in stencilItemGroups[0].paletteItems"
								class="stencil-item" id="{{item.id}}"
								title="{{item.description}}" ng-model="draggedElement"
								data-drag="true"
								jqyoui-draggable="{onStart:'startDragCallback', onDrag:'dragCallback'}"
								data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}">

								<img ng-src="techbloom/les/editor-app/stencilsets/bpmn2.0/icons/{{item.icon}}"
								width="16px;" height="16px;" /> {{item.name}}</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="canvasHelpWrapper"
				ng-class="{'col-xs-12':previewMode, 'col-xs-10':!previewMode}">
				<div class="subheader editor-toolbar" id="editor-header"
					ng-if="!previewMode">
					<div class="btn-group">
						<div class="btn-toolbar pull-left" ng-controller="ToolbarController"
							ng-cloak>
							<button id="{{item.id}}" title="{{item.title | translate}}"
								ng-repeat="item in items" ng-switch on="item.type"
								class="btn btn-inverse"
								ng-class="{'separator': item.type == 'separator'}"
								ng-disabled="item.type == 'separator' || item.enabled == false"
								ng-click="toolbarButtonClicked($index)">
								<i ng-switch-when="button" ng-class="item.cssClass"
									class="toolbar-button" data-toggle="tooltip"
									title="{{item.title | translate}}"></i>
								<div ng-switch-when="separator" ng-class="item.cssClass"></div>
							</button>
						</div>
					</div>
					<!--  <div class="btn-group pull-right" ng-show="!secondaryItems.length">
				        <div class="btn-toolbar pull-right" ng-controller="ToolbarController">
			        	<button title="{{item.title | translate}}" ng-repeat="item in secondaryItems" ng-switch on="item.type" class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
			                ng-disabled="item.type == 'separator'" ng-click="toolbarSecondaryButtonClicked($index)" id="{{item.id}}">
			        		<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip" title="{{item.title | translate}}"></i>
				            <div ng-switch-when="separator" ng-class="item.cssClass"></div>
			        	</button>
			  		  </div>
			        </div> -->
				</div>
				<span ng-if="previewMode"
					style="position: absolute;right: 79px;top: 20px;width: 203px;">
					<input type="text" name="select_key" id="select_key"
					placeholder="产品批次"     ng-model="indexs.key"  ng-keyup="selectIndex($event)"
					style=" border-radius: 4px;min-height: 28px;border: 1px solid #ccc;width: 204px;padding: 2px 4px;">
					<i class="icon-question-sign"
					style="position: absolute;top: 8px;right: 8px;color: #999;"></i> </span>
				<div class="canvas-wrapper" id="canvasSection"
					ng-model="droppedElement" ng-model="droppedElement"
					data-drop="true" data-jqyoui-options
					jqyoui-droppable="{onDrop:'dropCallback',onOver: 'overCallback', onOut: 'outCallback'}">
					<div class="canvas-message" id="model-modified-date"></div>
				 
					<div class="Oryx_button" ng-repeat="item in quickMenuItems"
						id="{{item.id}}" title="{{item.description}}"
						ng-click="quickAddItem(item.id)" ng-model="draggedElement"
						data-drag="true"
						jqyoui-draggable="{onStart:'startDragCallbackQuickMenu', onDrag:'dragCallbackQuickMenu'}"
						data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}"
						style="display:none">
						<img ng-src="editor-app/stencilsets/bpmn2.0/icons/{{item.icon}}" />
					</div>
				    <div class="Oryx_button" id="delete-button"
						title="{{'BUTTON.ACTION.DELETE.TOOLTIP' | translate}}"
						ng-click="deleteShape()" style="display:none">
						<img src="editor-app/images/delete.png" />
					</div>
					<div class="Oryx_button" id="morph-button"
						title="{{'BUTTON.ACTION.MORPH.TOOLTIP' | translate}}"
						ng-click="morphShape()" style="display:none">
						<img src="editor-app/images/wrench.png" />
					</div> 
				</div>
			</div>
			<div id="propertiesHelpWrapper"
				ng-class="{true:'col-xs-12', false:'col-xs-10'}[previewMode]">
				<div class="propertySection" id="propertySection"
					ng-if="!previewMode"
					ng-class="{collapsed: propertyWindowState.collapsed}">
					<div class="selected-item-section">
						<div class="clearfix">
							<div class="pull-right" ng-if="selectedItem.auditData.createDate">
								<strong>{{'ELEMENT.DATE_CREATED' | translate}}: </strong>
								{{selectedItem.auditData.createDate}}
							</div>
							<div class="pull-right" ng-if="selectedItem.auditData.author">
								<strong>{{'ELEMENT.AUTHOR' | translate}}: </strong>
								{{selectedItem.auditData.author}}
							</div>
							<div class="selected-item-title">
								<a ng-click="propertyWindowState.toggle()"> <i
									class="glyphicon"
									ng-class="{'glyphicon-chevron-right': propertyWindowState.collapsed, 'glyphicon-chevron-down': !propertyWindowState.collapsed}"></i>
									<span
									ng-show="selectedItem.title != undefined && selectedItem.title != null && selectedItem.title.length > 0">{{selectedItem.title}}</span>
									<span
									ng-show="!selectedItem || selectedItem.title == undefined || selectedItem.title == null || selectedItem.title.length == 0">{{modelData.name}}</span>
								</a>
							</div>
						</div>
						<div class="selected-item-body">
							<div>
								<div class="property-row"
									ng-repeat="property in selectedItem.properties"
									ng-click="propertyClicked($index)"
									ng-class="{'clear' : $index%2 == 0}">
									<span class="title" ng-if="!property.hidden">{{
										property.title }}&nbsp;:</span> <span class="title-removed"
										ng-if="property.hidden"><i>{{ property.title
											}}&nbsp;({{'PROPERTY.REMOVED' | translate}})&nbsp;:</i>
									</span> <span class="value"> <ng-include
											src="getPropertyTemplateUrl($index)"
											ng-if="!property.hasReadWriteMode"></ng-include> <ng-include
											src="getPropertyReadModeTemplateUrl($index)"
											ng-if="property.hasReadWriteMode && property.mode == 'read'"></ng-include>
										<ng-include src="getPropertyWriteModeTemplateUrl($index)"
											ng-if="property.hasReadWriteMode && property.mode == 'write'"></ng-include>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 表格 -->
				<div class="row-fluid" style="padding:0 3px;" ng-if="previewMode">
					<!-- 表格数据 -->
					<span style="position: absolute;z-index: 2;right: 40px; top: 4px;"> <input
						type="text" name="orderNo" id="orderNo" placeholder="订单编号" ng-model="select.orderNo"
						style=" border-radius: 4px;min-height: 24px;border: 1px solid #ccc;width: 110px;padding: 2px 4px;    float: left;
    border-right: 0px;
    border-radius: 0px;
    border-bottom-right-radius: 0px;"> <input
						type="text" name="routeNo" id="routeNo" placeholder="工位编号" ng-model="select.routeNo"
						style=" min-height: 24px;border: 1px solid #ccc;width: 110px;padding: 2px 4px;    float: left;
    border-right: 0px;
   "> <input
						type="text" name="productNo" id="productNo" placeholder="产品编号" ng-model="select.productNo"
						style=" ;min-height: 24px;border: 1px solid #ccc;width: 110px;padding: 2px 4px;    float: left;
    border-right: 0px;"><input
						type="text" name="batchNo" id="batchNo" placeholder="产品批次" ng-model="select.batchNo"
						style="min-height: 24px;border: 1px solid #ccc;width: 110px;padding: 2px 4px;    float: left;
    border-right: 0px;">

						<button class="btn btn-primary btn-queryQx" 	ng-click="selectedClicked()"  style="
    padding: 1px 16px;
    border-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 1px solid #cbcbcb;
    height: 24px;
    font-size: 12px;
">
							查询<i class="fa fa-search" aria-hidden="true"
								style="margin-left:5px;"></i>
						</button> </span>
					<table class="table" id="grid-table" style="width:100%;"></table>
					<!-- 表格底部 -->
					<div id="grid-pager"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	(function() {
		//表格加载
		jQuery(function() {
			setTimeout(
					function() {
new Ajax.Request(window.top.context_path+'/modelReport/getcolumn/' +  EDITOR.UTIL.getParameterByName('modelId'), {
	            asynchronous: false,
	            method: 'get',
	            onSuccess: function(data){
	            var json  = JSON.parse(data.response);
					_grid = jQuery("#grid-table")
								.jqGrid(
										{
											url : window.top.context_path
													+ '/modelReport/modelViewDetail',
											datatype : "local",
											styleUI : 'Bootstrap',
											colNames :  eval(json.column),
											colModel : 	json.colName,
											rowNum : 20,
											rowList : [ 10, 20, 30 ],
											pager : '#grid-pager',
											sortname : 'id',
											sortorder : "desc",
											altRows : true,
											viewrecords : true,
											caption : "数据列表",
											hidegrid : false,
											multiselect : false,
											autowidth : true,
											loadComplete : function(data) {
												var replacement = {
													'ui-icon-seek-first' : 'fa fa-angle-double-left bigger-140',
													'ui-icon-seek-prev' : 'fa fa-angle-left bigger-140',
													'ui-icon-seek-next' : 'fa fa-angle-right bigger-140',
													'ui-icon-seek-end' : 'fa fa-angle-double-right bigger-140'
												};
												jQuery(
														'.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon')
														.each(
																function() {
																	var icon = jQuery(this);
																	var $class = jQuery
																			.trim(icon
																					.attr(
																							'class')
																					.replace(
																							'ui-icon',
																							''));
																	if ($class in replacement)
																		icon
																				.attr(
																						'class',
																						'ui-icon '
																								+ replacement[$class]);
																});
											},
											emptyrecords : "没有相关记录",
											loadtext : "加载中...",
											pgtext : "页码 {0} / {1}页",
											recordtext : "显示 {0} - {1}共{2}条数据"
										});

						//在分页工具栏中添加按钮
						jQuery("#grid-table").navGrid('#grid-pager', {
							edit : false,
							add : false,
							del : false,
							search : false,
							refresh : false
						}).navButtonAdd('#grid-pager', {
							caption : "",
							buttonicon : "fa fa-refresh green",
							onClickButton : function() {
								$("#grid-table").jqGrid('setGridParam', {
									postData : {}
								//发送数据 
								}).trigger("reloadGrid");
							}
						});
						jQuery(window).on('resize.jqGrid', function() {
							jQuery("#grid-table").jqGrid('setGridHeight', 140);

						});

						jQuery(window).triggerHandler('resize.jqGrid');

},
	            onFailure:  function(data){console.dir(data);}
	        });
						

					}, 300);
		})

	}())
</script>
